<clr-modal [(clrModalOpen)]="openToken" clrModalSize="xl">
  <h3 class="modal-title">Cluster Token
    <button type="button" class="btn btn-icon btn-link" (click)="copy(token)">
      <clr-icon shape="copy"></clr-icon>
      复制
    </button>
  </h3>
  <div class="modal-body">
    <textarea rows="20" cols="128" *ngIf="token" [(ngModel)]="token"></textarea>
    <div *ngIf="!token">
      Cluster Token 获取中......<i class="fa fa-spinner fa-pulse"></i>
    </div>
    <app-modal-alert #tokenAlert></app-modal-alert>
  </div>
  <div class="modal-footer">
  </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="openHost" clrModalSize="l">
  <h3 class="modal-title">域名解析规则
    <button class="btn btn-icon btn-link" (click)="copy(hosts.innerText)">
      <clr-icon shape="copy"></clr-icon>
      复制
    </button>
  </h3>
  <div class="modal-body" #hosts>
    <span>
      {{workerIp}} grafana.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
      {{workerIp}} prometheus.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
      {{workerIp}} registry-ui.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
      {{workerIp}} kubeapps-plus.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
    </span>
    <span *ngIf="currentCluster.persistent_storage === 'rook-ceph'">
      {{workerIp}} ceph.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
    </span>
    <app-modal-alert #alertModal></app-modal-alert>
  </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="openConfigs" clrModalSize="lg">
  <h3 class="modal-title">参数详情</h3>
  <div class="modal-body">
    <table class="table">
      <thead>
      <tr>
        <th>键</th>
        <th>值</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let config of currentCluster.configs | keys">
        <td style="text-transform : uppercase">{{config.key}}</td>
        <td>{{config.value}}</td>
      </tr>
      </tbody>
    </table>

  </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="openChangeStatus" clrModalSize="lg">
  <h3 class="modal-title">重置状态</h3>
  <div class="modal-body">
    <p>重置状态前请确认集群状态是否健康。</p>
    <form clrForm #statusForm='ngForm'>
      <clr-select-container>
        <label>状态</label>
        <select clrSelect [(ngModel)]="status" name="status" required>
          <option value="">请选择</option>
          <option value="RUNNING">运行中</option>
          <option value="READY">就绪</option>
        </select>
      </clr-select-container>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn" (click)="onCancel()">取消</button>
    <button type="button" class="btn btn-primary" (click)="onConfirm()" [disabled]="statusForm.invalid">确认</button>
  </div>
</clr-modal>


<app-confirm-alert (confirm)="handleEvent()"></app-confirm-alert>
<app-webkubectl></app-webkubectl>
<app-upgrade (confirm)="handleUpgrade()"></app-upgrade>

<div class="clr-row">
  <div class="clr-col-12">
    <div class="card">
      <div class="card-header">
        <div class="clr-row">
          <div class="clr-col-12">
            <button class="btn btn-outline" (click)="onInstall()"
                    [disabled]="currentCluster.status === 'RUNNING' || currentCluster.status == 'INSTALLING' || permission==='VIEWER'">
              <clr-icon shape="install"></clr-icon>&nbsp;安装
            </button>
            <button class="btn btn-outline" (click)="onUninstall()"
                    [disabled]="currentCluster.status === 'READY'  || currentCluster.status == 'INSTALLING' || permission==='VIEWER'">
              <clr-icon shape="uninstall"></clr-icon>&nbsp;卸载
            </button>
            <button class="btn btn-outline" (click)="onUpgrade()"
                    [disabled]="currentCluster.status !== 'RUNNING' || permission==='VIEWER'">
              <clr-icon shape="arrow"></clr-icon>&nbsp;升级
            </button>
            <button class="btn btn-outline" (click)="openChangeStatus=true" [disabled]="permission==='VIEWER'">
              <clr-icon shape="refresh"></clr-icon>&nbsp;重置
            </button>
            <button class="btn btn-outline" (click)="onGetToken()"
                    [disabled]="currentCluster.status !== 'RUNNING' || permission==='VIEWER'">
              <clr-icon shape="download"></clr-icon>&nbsp;Token
            </button>
            <button class="btn btn-outline" (click)="openWebkubectl()"
                    [disabled]="currentCluster.status !== 'RUNNING' || permission==='VIEWER'">
              <clr-icon shape="computer"></clr-icon>&nbsp;WebKubeCtl
            </button>
            <button class="btn btn-outline" (click)="toApp('grafana')"
                    [disabled]="currentCluster.status !== 'RUNNING' || permission==='VIEWER'">
              <img height="15px" width="15px" src="assets/images/grafana_icon.svg">&nbsp;监控/日志
            </button>
            <button class="btn btn-outline" (click)="toApp('registry-ui')"
                    [disabled]="currentCluster.status !== 'RUNNING' || permission==='VIEWER'">
              <img height="15px" width="15px" src="assets/images/registry.png">&nbsp;镜像仓库
            </button>
            <button class="btn btn-outline" (click)="toApp('kubeapps-plus')"
                    [disabled]="currentCluster.status !== 'RUNNING' || permission==='VIEWER'">
              <img height="15px" width="15px" src="assets/images/kubeapps.png">&nbsp;应用商店
            </button>
            <button class="btn btn-outline" (click)="openHost=true" [disabled]="workers.length === 0">
              域名解析
            </button>
            <button class="btn btn-sm btn-link" (click)="openConfigs=true" style="float:right;margin-top: 10px">参数
            </button>
          </div>
        </div>
      </div>
      <div class="card-block">
        <div class="clr-row">
          <div class="clr-col-lg-4 clr-col-4">
            <table>
              <tr>
                <td>集群名称:&nbsp;&nbsp;&nbsp;</td>
                <td>{{currentCluster.name}}</td>
              </tr>
              <tr>
                <td>版本:&nbsp;&nbsp;&nbsp;</td>
                <td>{{currentCluster.package}}</td>
              </tr>
              <tr *ngIf="currentCluster.plan">
                <td>区域:&nbsp;&nbsp;&nbsp;</td>
                <td>{{currentCluster.region}}</td>
              </tr>
              <tr *ngIf="currentCluster.plan">
                <td>可用区:&nbsp;&nbsp;&nbsp;</td>
                <td>{{currentCluster.zones}}{{currentCluster.zone}}</td>
              </tr>
              <tr>
                <td>部署模式:&nbsp;&nbsp;&nbsp;</td>
                <td>{{getDeployTypeComment(currentCluster.deploy_type)}}</td>
              </tr>
              <tr>
                <td>网络插件:&nbsp;&nbsp;&nbsp;</td>
                <td>{{currentCluster.network_plugin}}</td>
              </tr>
              <tr>
                <td>网络类型:&nbsp;&nbsp;&nbsp;</td>
                <td
                  *ngIf="currentCluster.network_plugin == 'flannel' && currentCluster.configs['FLANNEL_BACKEND']">{{currentCluster.configs['FLANNEL_BACKEND']}}</td>
                <td
                  *ngIf="currentCluster.network_plugin == 'calico' && currentCluster.configs['CALICO_IPV4POOL_IPIP']==='Always'">
                  IPIP
                </td>
                <td
                  *ngIf="currentCluster.network_plugin == 'calico' && currentCluster.configs['CALICO_IPV4POOL_IPIP']==='off'">
                  BGP
                </td>
              </tr>
              <tr>
                <td>存储类型:&nbsp;&nbsp;&nbsp;</td>
                <td>{{currentCluster.persistent_storage}}
                  <span style="padding-left: 10px" *ngIf="currentCluster.persistent_storage === 'rook-ceph'">
                  <a [href]="'http://ceph.'+currentCluster.configs['APP_DOMAIN']" target="_blank"><i
                    class="fa fa-dashboard fa-lg"></i></a>
                </span>
                </td>
              </tr>
              <tr *ngIf="currentCluster.persistent_storage==='nfs'">
                <td>存储:&nbsp;&nbsp;&nbsp;</td>
                <td>{{currentCluster.configs['nfs']}}</td>
              </tr>
              <tr *ngIf="currentCluster.persistent_storage==='external-ceph'">
                <td>存储:&nbsp;&nbsp;&nbsp;</td>
                <td>{{currentCluster.configs['external-ceph']}}</td>
              </tr>
              <tr>
                <td>创建时间:&nbsp;&nbsp;&nbsp;</td>
                <td>{{currentCluster.date_created | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
              </tr>
            </table>
          </div>
          <div class="clr-col-lg-4 clr-col-4" style="border-left:1px solid #AAAAAA">
            <div class="clr-col-md-12" style="text-align: center">
              <h4>容量信息</h4> <br>
            </div>
            <div class="clr-col-md-12" style="text-align: center">
              <circle-progress
                [percent]="cpuUsage"
                [radius]="52"
                [outerStrokeWidth]="10"
                [innerStrokeWidth]="10"
                [space]="-10"
                [outerStrokeColor]="cpuUsage | progressColor"
                [innerStrokeColor]="'#e5e9f2'"
                [titleFontSize]=20
                [unitsFontSize]=20
                [subtitleFontSize]="10"
                [subtitle]="'CPU 使用率'"
              ></circle-progress>
              <circle-progress
                [percent]="memUsage"
                [radius]="52"
                [outerStrokeWidth]="10"
                [innerStrokeWidth]="10"
                [space]="-10"
                [outerStrokeColor]="memUsage | progressColor"
                [innerStrokeColor]="'#e5e9f2'"
                [titleFontSize]=20
                [unitsFontSize]=20
                [subtitleFontSize]="10"
                [subtitle]="'内存 使用率'"
              ></circle-progress>
              <circle-progress
                [percent]="containerPercent"
                [radius]="52"
                [outerStrokeWidth]="10"
                [innerStrokeWidth]="10"
                [space]="-10"
                [outerStrokeColor]="containerPercent | progressColor"
                [innerStrokeColor]="'#e5e9f2'"
                [titleFontSize]=20
                [unitsFontSize]=20
                [subtitleFontSize]="10"
                [subtitle]="'容器组'"
              ></circle-progress>
            </div>
          </div>
          <div class="clr-col-lg-3 clr-col-3" style="border-left:1px solid #AAAAAA">
            <div class="clr-row">
              <div class="clr-col-md-12" style="text-align: center">
                <h4>统计信息</h4> <br>
              </div>
              <div class="clr-col-lg-5  clr-col-12 count">
                <span><b>{{nodeCount}}</b></span> <br>
                <span><b>{{namespaceCount}}</b></span> <br>
                <span><b>{{deploymentCount}}</b></span> <br>
                <span><b>{{podCount}}</b></span> <br>
                <span><b>{{containerCount}}</b></span> <br>
              </div>
              <div class="clr-col-lg-7 clr-col-12 type-face">
                <span>Nodes</span> <br>
                <span>Namespaces</span> <br>
                <span>Deployments</span> <br>
                <span>Pods</span> <br>
                <span>Containers</span> <br>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
